<template>
  <el-drawer
    title="修改商品信息"
    direction="rtl"
    size="32%"
    v-if="drawer"
    :visible.sync="drawer"
    :destroy-on-close="true"
    :before-close="beforeClose"
  >
    <el-row class="drawer_box">
      <el-col :span="23">
        <el-form
          label-width="80px"
          :model="good"
          ref="good"
          :rules="rules"
          class="edit_good_form"
        >
          <el-form-item label="标题" prop="name">
            <el-input v-model.trim="good.name"></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="label">
            <el-input maxlength="30" v-model="good.label"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
              class="description_textarea"
              type="textarea"
              autosize
              show-word-limit
              maxlength="255"
              v-model="good.description"
            ></el-input>
          </el-form-item>
          <el-form-item label="原价" prop="originPrice">
            <el-input v-model="good.originPrice"></el-input>
          </el-form-item>
          <el-form-item label="售价" prop="sellPrice">
            <el-input v-model="good.sellPrice"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-image
              v-for="image in good.image"
              :key="image.id"
              :src="image.picture"
              class="good_images"
              :preview-src-list="[image.picture]"
            >
            </el-image>
          </el-form-item>
          <el-form-item>
            <div style="float: right">
              <el-button type="primary" @click="handleModify"
                >保存修改</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-drawer>
</template>
<script>
import axios from "@/request";
import { Loading } from "element-ui";

export default {
  name: "EditGood",
  data() {
    return {
      drawer: false,
      good: {},
      rules: {
        name: [
          {
            required: true,
            message: "商品标题必填",
          },
        ],
        label: [
          {
            required: true,
            message: "标签必填",
          },
        ],
        description: [
          {
            required: true,
            message: "商品描述必填",
          },
        ],
        originPrice: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let reg = /^(\d+)(\.\d{1,2})?$/;
              reg.test(value)
                ? callback()
                : callback(new Error("格式有误（整数或者最多两位小数）"));
            },
          },
        ],
        sellPrice: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let reg = /^(\d+)(\.\d{1,2})?$/;
              reg.test(value)
                ? callback()
                : callback(new Error("格式有误（整数或者最多两位小数）"));
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.$bus.$on("updateGood", (good) => {
      this.good = JSON.parse(JSON.stringify(good));
    });
  },
  beforeDestroy() {
    this.$bus.$off("updateGood");
  },
  methods: {
    openDrawer() {
      this.drawer = true;
    },
    beforeClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleModify() {
      let loading = Loading.service({
        text: "正在更新数据...",
        target: ".edit_good_form",
      });
      // 数据校验
      try {
        this.$refs.good.validate((result, failedFields) => {
          if (!result) {
            throw new Error("校验未通过");
          }
        });
      } catch (error) {
        return loading.close();
      }
      axios
        .post("/good/updateGood", {
          ...this.good,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.data);
            this.$bus.$emit("refreshGoodList");
          } else {
            this.$message.error(res.data.data);
          }
          this.drawer = false;
          loading.close();
        })
        .catch((e) => {
          loading.close();
        });
    },
  },
};
</script>

<style scoped>
.good_images >>> .el-image__inner {
  max-height: 120px;
  margin: 10px;
}

.description_textarea >>> span {
  background: none;
}
</style>